<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>文字固定色</view>
			</view>
			<view class="tr">
				<view>borderColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定边框色</view>
			</view>
			<view class="tr">
				<view>backgroundColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定背景色</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>圆角，可选circle、square，或带单位数值</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>是否镂空</view>
			</view>
			<view class="tr">
				<view>borderType</view>
				<view>String</view>
				<view>无</view>
				<view>边框类型，同css样式</view>
			</view>
			<view class="tr">
				<view>borderBox</view>
				<view>Boolean</view>
				<view>true</view>
				<view>盒模型类型为borderBox</view>
			</view>
			<view class="tr">
				<view>shadow</view>
				<view>String</view>
				<view>无</view>
				<view>阴影，格式为css的box-shadow格式</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>无</view>
				<view>自定义宽，可填入带单位数值</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>自定义高，可填入带单位数值</view>
			</view>
			<view class="tr">
				<view>borderWidth</view>
				<view>Number,String</view>
				<view>1</view>
				<view>边框宽，默认单位px。可填入带单位数值</view>
			</view>
			<view class="tr">
				<view>fontSize</view>
				<view>String</view>
				<view>无</view>
				<view>自定义文字尺寸，需带单位</view>
			</view>
			<view class="tr">
				<view>bold</view>
				<view>Boolean</view>
				<view>false</view>
				<view>加粗</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>99</view>
				<view>最大显示值，超过显示max+。value是数字时有效</view>
			</view>
			<view class="tr">
				<view>boxClass</view>
				<view>String</view>
				<view>无</view>
				<view>标记元素样式名，全局样式有效</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>mode</view>
					<view>String</view>
					<view>value</view>
					<view>模式，可选:</view>
				</view>
				<view class="appendix">
					<view>value值显示(默认)，以value参数作为显示值</view>
					<view>dot圆点</view>
					<view>icon图标，以value参数作为图标名</view>
				</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>Number,String</view>
				<view>无</view>
				<view>传入值</view>
			</view>
			<view class="tr">
				<view>inside</view>
				<view>Boolean</view>
				<view>false</view>
				<view>嵌入模式，使用slot时应手动开启。以slot插入内容为基准，置于四个方向角或自定义偏移</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>point</view>
					<view>String,Object</view>
					<view>rightTop</view>
					<view>位置，嵌入模式开启后有效</view>
				</view>
				<view class="appendix">
					<view>leftTop，左上角</view>
					<view>rightTop，右上角(默认)</view>
					<view>leftBottom，左下角</view>
					<view>rightBottom，右下角</view>
					<view>{left:0, right:0, top:0, bottom:0}，手动设置偏移</view>
				</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-sign :value="值">&lt;/vi-sign>`}}
			</view>
			<view class="py-sm">
				<text>默认：</text>
				<vi-sign :value="999"></vi-sign>
			</view>
			<view class="py-sm">
				<text>圆点：</text>
				<vi-sign :value="1" mode="dot"></vi-sign>
			</view>
			<view class="py-sm">
				<text>图标：</text>
				<vi-sign value="icon-clock" mode="icon"></vi-sign>
			</view>
			<view class="py-sm fbox H x-left">
				<text>嵌入模式：</text>
				<view class="mr-e2">
					<vi-sign value="HOT" inside fontSize="12px" plain backgroundColor="#fff">slot内容</vi-sign>
				</view>
				<view class="mr-e2">
					<vi-sign :value="1" mode="dot" inside fontSize="12px">slot内容</vi-sign>
				</view>
				<view>
					<vi-sign value="icon-clock" mode="icon" inside fontSize="12px">slot内容</vi-sign>
				</view>
			</view>
			<view class="py-sm">
				<text>自定义偏移：</text>
				<vi-sign value="icon-clock" mode="icon" inside fontSize="12px" :point="{top:'-0.75em',left:'calc(50% - 0.75em)'}">
					<vi-button width="5em" size="sm">slot按钮</vi-button>
				</vi-sign>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.pageContainer{
	
}
</style>
